<script type="text/javascript" src="{$smarty.const.LIB_DIR}js/ObjectBase.js"></script>
<script type="text/javascript" src="{$smarty.const.LIB_DIR}js/Seat.js"></script>
<script type="text/javascript" src="{$smarty.const.LIB_DIR}js/CustomObject.js"></script>
<script type="text/javascript" src="{$smarty.const.LIB_DIR}js/RoundTable.js"></script>
<script type="text/javascript" src="{$smarty.const.LIB_DIR}js/AngularTable.js"></script>

<script type="text/javascript" src="{$smarty.const.LIB_DIR}js/PlanningPlaceholder.js"></script>
<script type="text/javascript" src="{$smarty.const.LIB_DIR}js/PlanningManager.js"></script>

<script type="text/javascript" src="{$smarty.const.TEMPLATE_DIR}planovanie/planovanie.js"></script>


<div style="width: 1300px">

    <div style="float: left; width: 200px;">
        <div style="margin: auto; width: 160px;">
            <div class="ui-widget-content ui-corner-all" style="margin: 5px">
                <h3 class="ui-widget-header" style="margin-top: 0; margin-bottom: 0; text-align: center;"> Plán sály </h3>
                <div style="padding: 4px;">
                    <button class="button" id="clear-button" style="width: 100%">
                        Zmaž plán
                    </button>
                    <button class="button" id="load-button" style="width: 100%">
                        Načítaj plán
                    </button>
                    <button class="button" id="save-button" style="width: 100%">
                        Ulož plán
                    </button>
                    <button class="button" id="submit-button" style="width: 100%">
                        Odovzdaj plán
                    </button>
                </div>
            </div>
            <div class="ui-widget-content ui-corner-all" style="margin: 5px">
                <h3 class="ui-widget-header" style="margin-top: 0; margin-bottom: 0; text-align: center;"> Nástroje </h3>
                <div style="padding: 4px;">
                    <input class="radio manager" name="tool" checked type="radio" value="select" id="select-table" />
                    <label for="select-table" style="width: 100%">
                        Označ
                    </label>
                    <input class="radio manager" name="tool" type="radio" value="roundTable" id="round-table" />
                    <label for="round-table" style="width: 100%">
                        Okrúhly stôl
                    </label>
                    <input class="radio manager" disabled="" name="tool" type="radio" value="angularTable" id="angular-table" />
                    <label for="angular-table" style="width: 100%">
                        Hranatý stôl
                    </label>
                    <input class="radio manager" name="tool" type="radio" value="seat" id="seat" />
                    <label for="seat" style="width: 100%">
                        Stolička
                    </label>
                    <input class="radio manager" name="tool" type="radio" value="custom" id="custom" />
                    <label for="custom" style="width: 100%">
                        Vlastný objekt
                    </label>
                </div>
            </div>
            <div class="ui-widget-content ui-corner-all" style="margin: 5px">
                <h3 class="ui-widget-header" style="margin-top: 0; margin-bottom: 0; text-align: center;"> Vlastnosti </h3>
                <div id="propDiv">

                </div>
            </div>
        </div>
    </div>
    <div id="target" style=" float: left; width: 1100px; height: 1100px; background: url('./resources/images/plan-background-default.png'); position: relative;">
    </div>
</div>

{literal}
<script type="text/javascript">
    var manager = new PlanningManager("#target", "#propDiv");
    $(".manager").change(function(){
        var type = $(this).val();
        manager.type = type;
    });

    $(function(){
        $(".button").button();
        $(".radio").button();
    });

    $("#save-button").click(function(){
        manager.save();
        alert("Plán bol uložený")
    });

    $("#submit-button").click(function(){
        manager.submit();
        alert("Plán bol odovzdaný")
    });


    $("#clear-button").click(function(){
        manager.clear();
    });

    $("#load-button").click(function(){
        manager.load();
    });

    manager.load();

</script>
{/literal}